<template>
  <view class="container">
    <view class="user_info">
      <view class="nav_bar" :style="{ height: customNav.customBar + 'px' }"></view>
      <view class="info_box flex_fc" @click="openlienceModal">
        <view class="avatar">
          <image
            v-if="userInfo.headimg"
            :src="userInfo.headimg"
            mode="scaleToFill"
          />
          <image
            v-else
            src="@/static/image/defaultAvatar.png"
            mode="scaleToFill"
          />
        </view>
        <view class="name">{{ userInfo.nickname || "用户昵称" }}</view>
        <view class="phone" v-if="userInfo.phone">{{ userInfo.phone }}</view>
      </view>
    </view>
    <view class="menu_box">
      <block v-for="(item, index) in menuList" :key="index">
        <view
          class="menu_item flex_sb"
          v-if="item.name != '联系客服'"
          @click="JumpPath(item.path)"
        >
          <view class="left flex_s">
            <view class="icon_box">
              <image
                :src="`/static/image/menu${index + 1}.png`"
                mode="aspectFill"
              />
            </view>
            <text>{{ item.name }}</text>
          </view>
          <view class="right">
            <up-icon name="arrow-right" color="#333333"></up-icon>
          </view>
        </view>
        <button open-type="contact" class="menu_item flex_sb" v-else>
          <view class="left flex_s">
            <view class="icon_box">
              <image
                :src="`/static/image/menu${index + 1}.png`"
                mode="aspectFill"
              />
            </view>
            <text>{{ item.name }}</text>
          </view>
          <view class="right">
            <up-icon name="arrow-right" color="#333333"></up-icon>
          </view>
        </button>
      </block>
    </view>
    <image
      class="support"
      src="@/static/image/support.png"
      mode="scaleToFill"
    />
    <licenseModal ref="myModal" @confirm="modalConfirm"></licenseModal>
  </view>
</template>

<script setup lang="ts">
import { JumpPath } from "@/utils";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { ref,  watch } from "vue";
import { getUser } from "@/api/user";
import { useTokenStore } from "@/store";
import licenseModal from "@/components/licenseModal.vue";
import customNav from "@/libs/customNav";
const tokenStore = useTokenStore();

onShow(() => {
  
    getUserInfo();
});
// 监听token变化
watch(
  () => tokenStore.token,
  (newValue: string) => {
    if (newValue) {
      getUserInfo();
    }
  }
);
const myModal = ref<InstanceType<typeof licenseModal> | null>(null);
function openlienceModal() {
  if (!userInfo.value.phone || !userInfo.value.nickname) {
    // 没有手机号或者昵称
    if (myModal.value) {
      myModal.value.getUserInfo();
      myModal.value.open();
    }
  }
}
function modalConfirm() {
  getUserInfo();
}
function getUserInfo() {
  getUser().then((res: any) => {
    userInfo.value = res.data.user;
  });
}
function onChooseAvatar(e: any) {
  // 获取授权头像
  console.log(e, "----------");

  try {
    let url = e.detail.avatarUrl;
    userInfo.value.headimg = url;
    // uploadImgs(
    //   "/data/api.data/upload",
    //   url,
    //   (res: any) => {
    //     userinfo.headimg = res.data.url;
    //   },
    //   (err: any) => {
    //     Tips({ title: err.msg });
    //   }
    // );
  } catch (error) {
    console.log(error, "--------");
  }

  // userinfo.headimg = e.detail.avatarUrl;
}
let userInfo = ref({
  phone: "",
  nickname: "",
  headimg: "",
});
let menuList = ref([
  {
    name: "联系客服",
    path: "",
  },
  {
    name: "活动规则",
    path: "/pages/rules/index",
  },
]);

let customBarRef = ref(0);

</script>

<style scoped lang="scss">
.container {
  min-height: 100vh;
  position: relative;
  .support {
    position: absolute;
    left: 50%;
    bottom: 90rpx;
    transform: translateX(-50%);
    width: 154rpx;
    height: 47rpx;
    display: block;
  }
  .menu_box {
    width: 700rpx;
    margin: -50rpx auto 0;
    background: #fff;
    border-radius: 20rpx;
    .menu_item {
      font-size: 30rpx;
      color: #333333;
      height: 123rpx;
      padding: 0 32rpx;
      &:not(:last-child) {
        border-bottom: 2rpx solid #f4f8fb;
      }
      .left {
        .icon_box {
          width: 42rpx;
          height: 42rpx;
          margin-right: 20rpx;
          image {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
  .user_info {
    width: 100%;
    height: 576rpx;
    background: linear-gradient(320deg, #d6fdfc 0%, #e6ffd7 100%);
    .info_box {
      width: 100%;
      .avatar {
        width: 200rpx;
        height: 200rpx;
        border-radius: 50%;
        overflow: hidden;
        margin-bottom: 20rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .name {
        font-size: 32rpx;
        color: #000;
        margin-bottom: 10rpx;
      }
      .phone {
        font-size: 28rpx;
        color: #616161;
      }
    }
  }
}
</style>
